﻿<!DOCTYPE html>
<html>
<head>
    <style>
        body, html { margin: 0; padding: 0; }
        canvas { position: fixed; width: 100%; height: 100%; }
    </style>
    <script src="./dist/pixi.js"></script>
    <script src="./dist/nice-drawbase.js"></script>
    <!-- <script src="./dist/gifuct-js.js"></script> -->
    <title></title>
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
    <meta charset="utf-8" />
</head>
<body>
    <script type="text/javascript">
        const {DrawBase} = Nice;
        const {Scene, ImageItem, GifItem, PolygonItem, LineItem, PolylineItem, 
            RectangleItem, EllipseItem, CircleItem, TextItem} = DrawBase;

        var scene = new Scene({ antialias: true, transparent: true, width:window.innerWidth, height:window.innerHeight });
        document.body.appendChild(scene.view);


        var imageitem = new ImageItem('./dist/assets/svg/Hollowed-Boxes.svg');
        imageitem.x = 100;
        imageitem.y = 200;
        imageitem.width = 300;
        imageitem.height = 350;  
        scene.addChild(imageitem);


        var gifitem = new GifItem('./dist/assets/gif/l1.gif');
        gifitem.x = 10;
        gifitem.y = 10;
        scene.addChild(gifitem);


        gifitem = new GifItem('./dist/assets/gif/l2.gif');
        gifitem.x = 60;
        gifitem.y = 10;
        scene.addChild(gifitem);


        gifitem = new GifItem('./dist/assets/gif/l3.gif');
        gifitem.x = 110;
        gifitem.y = 10;
        scene.addChild(gifitem);

        gifitem = new GifItem('./dist/assets/gif/l4.gif');
        gifitem.x = 160;
        gifitem.y = 10;
        scene.addChild(gifitem);

        gifitem = new GifItem('./dist/assets/gif/l5.gif');
        gifitem.x = 210;
        gifitem.y = 10;
        scene.addChild(gifitem);

        var pols = new PIXI.Polygon(100,100, 150,100, 125,150);
        var politem = new PolygonItem(pols);
        politem.beginFill(0xff0000);
        politem.draw();
        politem.endFill();
        politem.x = 210;
        politem.y = 40;
        scene.addChild(politem);

        var lineItem = new LineItem(new PIXI.Point(100,100), new PIXI.Point(200, 100));
        lineItem.lineStyle(2, 0x00FF00, 1);
        lineItem.draw();
        // lineItem.x = 210;
        // lineItem.y = 40;
        scene.addChild(lineItem);

        var pols = new PIXI.Polygon(300,100, 400,100, 325,150);
        var politem1 = new PolylineItem(pols);
        politem1.lineStyle(2, 0x00FF00, 1);
        politem1.draw();
        politem1.x = 210;
        politem1.y = 40;
        scene.addChild(politem1);

        var rectItem = new RectangleItem(550, 300, 40, 20);
        // Rectangle
        rectItem.beginFill(0xFEEB77);
        rectItem.draw();
        rectItem.endFill();
        scene.addChild(rectItem);

        rectItem.attr("fill", 0xff0000);
        rectItem.attr("fill-opacity", 0.7);
        rectItem.draw();

        var eItem = new EllipseItem(600, 300, 20, 10);
        // Rectangle
        eItem.beginFill(0x00EB77);
        eItem.draw();
        eItem.endFill();
        scene.addChild(eItem);
        eItem.beginFill(0xFF0000, 0.5);
        eItem.draw();

        var item = new CircleItem(660, 300, 60);
        // Rectangle
        item.beginFill(0xFE5577);
        item.draw();
        item.endFill();
        scene.addChild(item);

        //text
        const basicText = new TextItem('Basic text in pixi');
        basicText.x = 50;
        basicText.y = 100;
        scene.addChild(basicText);

        const style = new PIXI.TextStyle({
            fontFamily: 'Arial',
            fontSize: 36,
            fontStyle: 'italic',
            fontWeight: 'bold',
            fill: ['#ffffff', '#00ff99'], // gradient
            stroke: '#4a1850',
            strokeThickness: 5,
            dropShadow: true,
            dropShadowColor: '#000000',
            dropShadowBlur: 4,
            dropShadowAngle: Math.PI / 6,
            dropShadowDistance: 6,
            wordWrap: true,
            wordWrapWidth: 440,
        });

        const richText = new TextItem('Rich text with a lot of options and across multiple lines', style);
        richText.x = 50;
        richText.y = 250;
        scene.addChild(richText);

    </script>
</body>
</html>
